<template>
  <div>
    <div>
      <label for="orderNo">订单号：</label>
      <input id="orderNo" v-model="currentOrderNo" />
      <button @click="queryOrder">查询</button>
    </div>
    <div class="logistics-info" v-if="isShow">
      <MyGoods :orderInfo="orderInfo">
        <template #desc>
          <img :src="orderInfo.goodInfo.desc" alt="" style="width: 50px; height: 50px;">
        </template>
      </MyGoods>
      <MyLogistics :orderInfo="orderInfo">
      </MyLogistics>
    </div>
  </div>
</template>

<script>
import MyGoods from './components/MyGoods.vue';
import MyLogistics from './components/MyLogistics.vue';

export default {
  components: {
    MyGoods,
    MyLogistics
  },
  data() {
    return {
      isShow: false,
      currentOrderNo: '',
      orderInfo: {
        orderNo: this.currentOrderNo,
        role: 'admin', // 角色 ==> 用于判断是否有查看用户详情的权限
        logisticsStatus: 2, // 0 未发货 1 已发货 2 已签收 3 未签收
        logisticsCompany: '顺丰速运', // 快递公司的名称
        logisticsNo: 'SF123456789', // 快件运单号
        logisticsInfo: [
          {
            time: '2023-02-01 10:00:00', // 时间
            content: '快件已发货' // 快递状态
          },
          {
            time: '2023-02-02 09:00:00',
            content: '快件到达深圳中心'
          },
          {
            time: '2023-02-03 08:00:00',
            content: '快件派送中'
          },
          {
            time: '2023-02-04 16:00:00',
            content: '已签收'
          }
        ],
        goodInfo: { // 商品信息
          goodNo: '12345678912312', // 商品id
          goodName: '三体',// 商品名称
          type: 0, // 0 代表的是文本 1代表的是 图片
          // desc 描述 ==> 可以是图片 也可以是其他的东西。数据可以随便改
          desc: 'https://img0.baidu.com/it/u=240348220,2494154601&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1731690000&t=10585a9663a4c59ee9cac72e5d17fec3'
        }
      }
    }
  },
  methods: {
    queryOrder() {
      if (this.currentOrderNo) {
        setTimeout(() => {
          this.isShow = true;
        }, 500);
        this.currentOrderNo = '';
      } else {
        alert('请输入订单号');
        this.isShow = false;
      }
    }
  }
}
</script>